<!DOCTYPE html>
<html>
<head>
  <title>Wave Interference Diagram</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="600" height="300"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = '#000000';
    ctx.fillStyle = '#000000';
    ctx.lineWidth = 1.5;
    
    // Coordinates
    const y_line = 120;
    const x_p = 100;
    const x_q = 350;
    const x_r = 500;
    const pointRadius = 4.5;

    // Draw the main horizontal line
    ctx.beginPath();
    ctx.moveTo(50, y_line);
    ctx.lineTo(550, y_line);
    ctx.stroke();

    // Helper function to draw a point with a label
    function drawPointWithLabel(x, y, label) {
      // Draw point
      ctx.beginPath();
      ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
      ctx.fill();
      
      // Draw label
      ctx.font = 'italic 24px "Times New Roman"';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillText(label, x, y - 10);
    }

    // Draw points P, Q, R
    drawPointWithLabel(x_p, y_line, 'P');
    drawPointWithLabel(x_q, y_line, 'Q');
    drawPointWithLabel(x_r, y_line, 'R');

    // Draw the dimension line between P and Q
    const y_dim_line = y_line + 70;
    
    // Vertical extension lines
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(x_p, y_line);
    ctx.lineTo(x_p, y_dim_line);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(x_q, y_line);
    ctx.lineTo(x_q, y_dim_line);
    ctx.stroke();
    ctx.lineWidth = 1.5;

    // Horizontal line with arrowheads
    const headLength = 10;
    ctx.beginPath();
    // Line
    ctx.moveTo(x_p, y_dim_line);
    ctx.lineTo(x_q, y_dim_line);
    // Left arrowhead
    ctx.moveTo(x_p + headLength, y_dim_line - 5);
    ctx.lineTo(x_p, y_dim_line);
    ctx.lineTo(x_p + headLength, y_dim_line + 5);
    // Right arrowhead
    ctx.moveTo(x_q - headLength, y_dim_line - 5);
    ctx.lineTo(x_q, y_dim_line);
    ctx.lineTo(x_q - headLength, y_dim_line + 5);
    ctx.stroke();
    
    // Draw the dimension label: 3/2 λ
    const x_label_mid = (x_p + x_q) / 2;
    const y_label_mid = y_dim_line - 25;
    
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.textBaseline = 'middle';
    
    const x_frac_center = x_label_mid - 10;
    const bar_width = 20;

    // Draw '3' (numerator)
    ctx.textAlign = 'center';
    ctx.fillText('3', x_frac_center, y_label_mid - 11);
    
    // Draw fraction bar
    ctx.beginPath();
    ctx.moveTo(x_frac_center - bar_width/2, y_label_mid);
    ctx.lineTo(x_frac_center + bar_width/2, y_label_mid);
    ctx.stroke();
    
    // Draw '2' (denominator)
    ctx.fillText('2', x_frac_center, y_label_mid + 12);
    
    // Draw 'λ'
    ctx.font = 'italic 26px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.fillText('λ', x_frac_center + bar_width/2 + 4, y_label_mid);

  </script>
</body>
</html>